<template>
  <!-- 编码人: lzq -->
  <div>
    <el-card class="box-card">
      <!-- 按钮 -->
      <div class="but">
        <el-button size="medium" @click="previewbtn" class="saveBtn"
          >预览</el-button
        >
        <el-button class="keep" size="medium" @click="saveTable"
          >保存</el-button
        >
        <el-button
          size="medium"
          @click="cancel"
          style="margin-right: 16px;"
          class="saveBtn"
          >取消</el-button
        >
        <el-button
          size="medium"
          @click="deleteTab"
          type="danger"
          style="margin-right: 0px; color:#fff; border: 1px solid #f56c6c;"
          >重置</el-button
        >
      </div>
      <div class="bigbox">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            ><span style="color: gray">资源配置</span></el-breadcrumb-item
          >
          <el-breadcrumb-item>Tab切换图配置</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="card_content">
          <!-- 左侧导航部分 -->
          <div class="card_left">
            <p>{{ title }}</p>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
              suffix-icon="el-icon-search"
            >
            </el-input>
            <!-- <div class="search">
            <img src="./table_img/search.png" alt="" />
          </div> -->
            <el-tree
              class="filter-tree"
              :data="tableData"
              :props="defaultProps"
              default-expand-all
              node-key="id"
              :filter-node-method="filterNode"
              highlight-current
              @node-click="handleNodeClick"
              ref="tree"
            >
            </el-tree>
          </div>
          <!-- 中间输入框部分 -->
          <div class="card_middle">
            <!-- 第一栏上传图片 -->
            <el-form
              :model="ruleForm1"
              :rules="rules"
              ref="ruleForm1"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="Tab名称1：" prop="name1">
                <el-input
                  maxlength="8"
                  v-model="ruleForm1.name1"
                  :disabled="isInput"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="上传图片:" prop="image1" class="content_one">
                <div class="close_small" v-if="oneUrl" @click="closeOne">
                  <img src="./table_img/icon_clos.png" alt="" />
                </div>
                <el-upload
                  class="avatar-uploader avatar_top"
                  action="#"
                  :disabled="authenStatusOne"
                  :show-file-list="false"
                  :http-request="oneRequest"
                  :on-change="oneHeadleChange"
                  accept="image/*"
                >
                  <img v-if="oneUrl" :src="oneUrl" class="avatar" />
                  <div class="upImg" v-show="!oneUrl">
                    <div>
                      <img
                        src="@/views/partner/partner_img/Icon_up.png"
                        alt=""
                      />
                    </div>
                  </div>
                </el-upload>
                <span class="hint">支持JPG、PNG格式，不超过3MB</span>
              </el-form-item>
            </el-form>
            <!-- 第二栏上传图片 -->
            <el-form
              :model="ruleForm2"
              :rules="rules"
              ref="ruleForm2"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="Tab名称2：" prop="name2">
                <el-input
                  maxlength="8"
                  v-model="ruleForm2.name2"
                  :disabled="isInput"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="上传图片:" prop="image2" class="content_one">
                <div class="close_small" v-if="twoUrl" @click="closeTwo">
                  <img src="./table_img/icon_clos.png" alt="" />
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :disabled="authenStatusTwo"
                  :show-file-list="false"
                  :http-request="twoRequest"
                  :on-change="twoHeadleChange"
                  accept="image/*"
                >
                  <img v-if="twoUrl" :src="twoUrl" class="avatar" />
                  <div class="upImg" v-show="!twoUrl">
                    <div>
                      <img
                        src="@/views/partner/partner_img/Icon_up.png"
                        alt=""
                      />
                    </div>
                  </div>
                </el-upload>
                <span class="hint">支持JPG、PNG格式，不超过3MB</span>
              </el-form-item>
            </el-form>
            <!-- 第三栏上传图片 -->
            <el-form
              :model="ruleForm3"
              :rules="rules"
              ref="ruleForm3"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="Tab名称3：" prop="name3">
                <el-input
                  maxlength="8"
                  v-model="ruleForm3.name3"
                  :disabled="isInput"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="上传图片:" prop="image3" class="content_one">
                <div class="close_small" v-if="threeUrl" @click="closeThree">
                  <img src="./table_img/icon_clos.png" alt="" />
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :disabled="authenStatusThree"
                  :show-file-list="false"
                  :http-request="threeRequest"
                  :on-change="threeHeadleChange"
                  accept="image/*"
                >
                  <img v-if="threeUrl" :src="threeUrl" class="avatar" />
                  <div class="upImg" v-show="!threeUrl">
                    <div>
                      <img
                        src="@/views/partner/partner_img/Icon_up.png"
                        alt=""
                      />
                    </div>
                  </div>
                </el-upload>
                <span class="hint">支持JPG、PNG格式，不超过3MB</span>
              </el-form-item>
            </el-form>
            <!-- 第四栏上传图片 -->
            <el-form
              :model="ruleForm4"
              :rules="rules"
              ref="ruleForm4"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="Tab名称4：" prop="name4">
                <el-input
                  maxlength="8"
                  v-model="ruleForm4.name4"
                  :disabled="isInput"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="上传图片:" prop="image4" class="content_one">
                <div class="close_small" v-if="fourUrl" @click="closeFour">
                  <img src="./table_img/icon_clos.png" alt="" />
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :disabled="authenStatusFour"
                  :show-file-list="false"
                  :http-request="fourRequest"
                  :on-change="fourHeadleChange"
                  accept="image/*"
                >
                  <img v-if="fourUrl" :src="fourUrl" class="avatar" />
                  <div class="upImg" v-show="!fourUrl">
                    <div>
                      <img
                        src="@/views/partner/partner_img/Icon_up.png"
                        alt=""
                      />
                    </div>
                  </div>
                </el-upload>
                <span class="hint">支持JPG、PNG格式，不超过3MB</span>
              </el-form-item>
            </el-form>
            <!-- 第五栏上传图片 -->
            <el-form
              :model="ruleForm5"
              :rules="rules"
              ref="ruleForm5"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="Tab名称5：" prop="name5">
                <el-input
                  maxlength="8"
                  v-model="ruleForm5.name5"
                  :disabled="isInput"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="上传图片:" prop="image5" class="content_one">
                <div class="close_small" v-if="fiveUrl" @click="closeFive">
                  <img src="./table_img/icon_clos.png" alt="" />
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :disabled="authenStatusFive"
                  :show-file-list="false"
                  :http-request="fiveRequest"
                  :on-change="fiveHeadleChange"
                  accept="image/*"
                >
                  <img v-if="fiveUrl" :src="fiveUrl" class="avatar" />
                  <div class="upImg" v-show="!fiveUrl">
                    <div>
                      <img
                        src="@/views/partner/partner_img/Icon_up.png"
                        alt=""
                      />
                    </div>
                  </div>
                </el-upload>
                <span class="hint">支持JPG、PNG格式，不超过3MB</span>
              </el-form-item>
            </el-form>
            <!-- 第六栏上传图片 -->
            <el-form
              :model="ruleForm6"
              :rules="rules"
              ref="ruleForm6"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="Tab名称6：" prop="name6">
                <el-input
                  maxlength="8"
                  v-model="ruleForm6.name6"
                  :disabled="isInput"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="上传图片:" prop="image6" class="content_one">
                <div class="close_small" v-if="sixUrl" @click="closeSix">
                  <img src="./table_img/icon_clos.png" alt="" />
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :disabled="authenStatusSix"
                  :show-file-list="false"
                  :http-request="sixRequest"
                  :on-change="sixHeadleChange"
                  accept="image/*"
                >
                  <img v-if="sixUrl" :src="sixUrl" class="avatar" />
                  <div class="upImg" v-show="!sixUrl">
                    <div>
                      <img
                        src="@/views/partner/partner_img/Icon_up.png"
                        alt=""
                      />
                    </div>
                  </div>
                </el-upload>
                <span class="hint">支持JPG、PNG格式，不超过3MB</span>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 预览弹窗 -->
    <div class="seeUp" v-show="previewImg">
      <div class="tables">
        <div class="close_img" @click="closePreview">
          <img src="./table_img/close_img.png" alt="" />
        </div>
        <div class="text">
          <div
            :class="index == clicktableimg ? 'border' : ''"
            @click="clicktable(index)"
            v-for="(item, index) in tablearr"
            :key="index"
          >
            {{ item.tabName }}
          </div>
        </div>
        <div class="imgs">
          <div
            v-show="index == clicktableimg"
            v-for="(item, index) in tablearr"
            :key="index"
          >
            <img :src="item.tabImg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  // 导航配置结构接口(开放)
  ndFrontMenu,
  // 根据id查询导航Tab配置接口
  getInfoById,
  // 批量删除导航Tab信息接口
  delUploads,
  // 根据导航搜索内容查询的接口(未启用=>element的el-tree自带)
  getInfosByName,
  // 保存导航Tab信息接口
  saveOrUpdate,
  // 上传图片的接口
  uploads,
} from "@/api/connector/connector.js";
export default {
  // components: {
  //   tableItem,
  // },
  data() {
    return {
      // 首页id的下标
      homeIndex: "",
      // 点击的标题
      title: "",
      // 图片地址
      // pass: "",
      previewImg: false,
      // 左侧导航部分
      // 搜索输入内容
      tabId: "",
      filterText: "",
      tableData: [],
      navigationId: "",
      defaultProps: {
        children: "parentList",
        label: "name",
      },
      // 输入框是否禁用
      isInput: false,
      // 点击图片不弹出上传框
      authenStatusOne: false,
      authenStatusTwo: false,
      authenStatusThree: false,
      authenStatusFour: false,
      authenStatusFive: false,
      authenStatusSix: false,
      // 上传图片的地址,上传的tab名
      tablearr: [],
      // 第一个上传图片的url.... 和图片x号,logo字样显示隐藏
      oneUrl: "",
      // 第二个上传图片的url.... 和图片x号,logo字样显示隐藏
      twoUrl: "",
      // 第三个上传图片的url.... 和图片x号,logo字样显示隐藏
      threeUrl: "",
      // 第四个上传图片的url.... 和图片x号,logo字样显示隐藏
      fourUrl: "",
      // 第五个上传图片的url.... 和图片x号,logo字样显示隐藏
      fiveUrl: "",
      // 第六个上传图片的url.... 和图片x号,logo字样显示隐藏
      sixUrl: "",
      // form表单输入内容+图片上传
      ruleForm1: {
        name1: "",
        image1: "",
      },
      ruleForm2: {
        name2: "",
        image2: "",
      },
      ruleForm3: {
        name3: "",
        image3: "",
      },
      ruleForm4: {
        name4: "",
        image4: "",
      },
      ruleForm5: {
        name5: "",
        image5: "",
      },
      ruleForm6: {
        name6: "",
        image6: "",
      },
      // 图片的原始路径
      avatar1: "",
      avatar2: "",
      avatar3: "",
      avatar4: "",
      avatar5: "",
      avatar6: "",
      // 图片上传成功的新路径
      newavatar1: "",
      newavatar2: "",
      newavatar3: "",
      newavatar4: "",
      newavatar5: "",
      newavatar6: "",
      rules: {
        //   name1: [
        //     // { required: true, message: "请输入名称", trigger: "change" },
        //     { min: 0, max: 8, message: "名称字数在0-8个", trigger: "change" },
        //   ],
        //   name2: [
        //     // { required: true, message: "请输入名称", trigger: "change" },
        //     { min: 0, max: 8, message: "名称字数在0-8个", trigger: "change" },
        //   ],
        //   name3: [
        //     // { required: true, message: "请输入名称", trigger: "change" },
        //     { min: 0, max: 8, message: "名称字数在0-8个", trigger: "change" },
        //   ],
        //   name4: [
        //     // { required: true, message: "请输入名称", trigger: "change" },
        //     { min: 0, max: 8, message: "名称字数在0-8个", trigger: "change" },
        //   ],
        //   name5: [
        //     // { required: true, message: "请输入名称", trigger: "change" },
        //     { min: 0, max: 8, message: "名称字数在0-8个", trigger: "change" },
        //   ],
        //   name6: [
        //     // { required: true, message: "请输入名称", trigger: "change" },
        //     { min: 0, max: 8, message: "名称字数在0-8个", trigger: "change" },
        //   ],
      },
      // 弹窗当前激活菜单的index
      clicktableimg: 0,
    };
  },
  created() {
    this.$nextTick(() => {
      this.getNav();
    });
  },
  watch: {
    // 监听input里面的数据
    filterText(val) {
      this.$refs.tree.filter(val);
      // if (val === "") {
      //   this.getNav();
      // }
    },
  },
  methods: {
    // 预览弹窗点击tabs事件
    clicktable(sort) {
      this.clicktableimg = sort;
    },
    closeOne() {
      this.oneUrl = "";
      this.ruleForm1.image1 = "";
      this.authenStatusOne = false;
    },
    // 第一个上图片触发的事件
    oneRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt3M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt3M) {
        // 改：功能
        if (this.newavatar1) {
          this.oneUrl = this.newavatar1;
        } else {
          this.oneUrl = this.avatar1;
          if (this.oneUrl) {
            this.authenStatusOne = true;
          } else {
            this.authenStatusOne = false;
          }
        }
        this.$message.error("上传图片大小不能超过 3MB!");
      }
      // return isJPG && isLt3M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt3M == true) {
        this.authenStatusOne = true;
        let formData = new FormData();
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          // console.log(res);
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm1.image1 = item.url;
              // 改：功能
              this.newavatar1 = item.url;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },
    // 将上传图片的原路径赋值给临时路径
    oneHeadleChange(file, fileList) {
      this.oneUrl = URL.createObjectURL(file.raw);
      this.authenStatusOne = true;
    },
    closeTwo() {
      this.twoUrl = "";
      this.ruleForm2.image2 = "";
      this.authenStatusTwo = false;
    },
    // 第二个上图片触发的事件
    twoRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt3M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt3M) {
        // 改：功能
        if (this.newavatar2) {
          this.twoUrl = this.newavatar2;
        } else {
          this.twoUrl = this.avatar2;
          if (this.twoUrl) {
            this.authenStatusTwo = true;
          } else {
            this.authenStatusTwo = false;
          }
        }
        this.$message.error("上传图片大小不能超过 3MB!");
      }
      // return isJPG && isLt3M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt3M == true) {
        this.authenStatusTwo = true;
        let formData = new FormData();
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm2.image2 = item.url;
              // 改：功能
              this.newavatar2 = item.url;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },
    twoHeadleChange(file, fileList) {
      this.twoUrl = URL.createObjectURL(file.raw);
      this.authenStatusTwo = true;
    },
    closeThree() {
      this.threeUrl = "";
      this.ruleForm3.image3 = "";
      this.authenStatusThree = false;
    },
    // 第三个上图片触发的事件
    threeRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt3M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt3M) {
        // 改：功能
        if (this.newavatar3) {
          this.threeUrl = this.newavatar3;
        } else {
          this.threeUrl = this.avatar3;
          if (this.threeUrl) {
            this.authenStatusThree = true;
          } else {
            this.authenStatusThree = false;
          }
        }
        this.$message.error("上传图片大小不能超过 3MB!");
      }
      // return isJPG && isLt3M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt3M == true) {
        this.authenStatusThree = true;
        let formData = new FormData();
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm3.image3 = item.url;
              // 改：功能
              this.newavatar3 = item.url;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },

    threeHeadleChange(file, fileList) {
      this.threeUrl = URL.createObjectURL(file.raw);
      this.authenStatusThree = true;
    },
    closeFour() {
      this.fourUrl = "";
      this.ruleForm4.image4 = "";
      this.authenStatusFour = false;
    },
    // 第四个上图片触发的事件
    fourRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt3M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt3M) {
        // 改：功能
        if (this.newavatar4) {
          this.fourUrl = this.newavatar4;
        } else {
          this.fourUrl = this.avatar4;
          if (this.fourUrl) {
            this.authenStatusFour = true;
          } else {
            this.authenStatusFour = false;
          }
        }
        this.$message.error("上传图片大小不能超过 3MB!");
      }
      // return isJPG && isLt3M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt3M == true) {
        this.authenStatusFour = true;
        let formData = new FormData();
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm4.image4 = item.url;
              // 改：功能
              this.newavatar4 = item.url;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },

    fourHeadleChange(file, fileList) {
      this.fourUrl = URL.createObjectURL(file.raw);
      this.authenStatusFour = true;
    },
    closeFive() {
      this.fiveUrl = "";
      this.ruleForm5.image5 = "";
      this.authenStatusFive = false;
    },
    // 第五个上图片触发的事件
    fiveRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt3M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt3M) {
        // 改：功能
        if (this.newavatar5) {
          this.fiveUrl = this.newavatar5;
        } else {
          this.fiveUrl = this.avatar5;
          if (this.fiveUrl) {
            this.authenStatusFive = true;
          } else {
            this.authenStatusFive = false;
          }
        }
        this.$message.error("上传图片大小不能超过 3MB!");
      }
      // return isJPG && isLt3M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt3M == true) {
        this.authenStatusFive = true;
        let formData = new FormData();
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm5.image5 = item.url;
              // 改：功能
              this.newavatar5 = item.url;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },

    fiveHeadleChange(file, fileList) {
      this.fiveUrl = URL.createObjectURL(file.raw);
      this.authenStatusFive = true;
    },
    closeSix() {
      this.sixUrl = "";
      this.ruleForm6.image6 = "";
      this.authenStatusSix = false;
    },
    // 第六个上图片触发的事件
    sixRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt3M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt3M) {
        // 改：功能
        if (this.newavatar6) {
          this.sixUrl = this.newavatar6;
        } else {
          this.sixUrl = this.avatar6;
          if (this.sixUrl) {
            this.authenStatusSix = true;
          } else {
            this.authenStatusSix = false;
          }
        }
        this.$message.error("上传图片大小不能超过 3MB!");
      }
      // return isJPG && isLt3M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt3M == true) {
        this.authenStatusSix = true;
        let formData = new FormData();
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "导航栏");
        formData.append("tagNames", [this.title]);
        uploads(formData).then((res) => {
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              this.ruleForm6.image6 = item.url;
              // 改：功能
              this.newavatar6 = item.url;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },

    sixHeadleChange(file, fileList) {
      this.sixUrl = URL.createObjectURL(file.raw);
      this.authenStatusSix = true;
    },
    // 监听input里面的数据返回
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    // 调用接口获取左侧导航栏
    getNav() {
      ndFrontMenu().then((res) => {
        if (res.data.code === "10000") {
          this.tableData = res.data.data;
          res.data.data.map((item, index) => {
            // console.log(item);
            if (item.id === "6947dafe-0626-48d9-8776-572f022bfe84") {
              this.homeIndex = index;
            }
            // 修改鼠标移动到首页时的样式(未启用)
            // setTimeout(() => {
            //   let leaders = document.getElementsByClassName("el-tree-node__content")
            //   leaders[this.homeIndex].style.color = '#606266'
            //   leaders[this.homeIndex].style.background = '#fff'
            //   leaders[this.homeIndex].style.cursor = "not-allowed"
            //   // leaders[this.homeIndex].classList.add("stop")
            // })
          });
          //默认选中的节点并把节点赋值到title
          this.$nextTick(function() {
            // 如果树的内容数组第一个对象的内容不等于首页的id
            if (
              this.tableData[0].id !== "6947dafe-0626-48d9-8776-572f022bfe84"
            ) {
              // 默认选中第一个对象
              this.$refs.tree.setCurrentKey(this.tableData[0].id);
              // 把第一个对象的name赋值给标题title
              this.title = this.tableData[0].name;
              // 调用获取id内容的接口获取当前id的数据
              let Obj = {
                menuId: this.tableData[0].id,
              };
              this.get(Obj);
            } else if (
              this.tableData[0].id === "6947dafe-0626-48d9-8776-572f022bfe84"
            ) {
              // 如果树的内容数组第一个对象的内容等于首页的id 采用第二个
              this.$refs.tree.setCurrentKey(this.tableData[1].id);
              this.title = this.tableData[1].name;
              let Obj = {
                menuId: this.tableData[1].id,
              };
              this.get(Obj);
            }
          });
        } else {
          this.$message.error("请求太频繁....");
        }
      });
    },
    //获取页面数据接口
    get(obj) {
      getInfoById(obj).then((res) => {
        // 第一栏判断
        if (res.data.code === "10000") {
          this.tabId = res.data.data.id;
          if (res.data.data.tabs[0] !== undefined) {
            if (
              res.data.data.tabs[0].tabName == "" &&
              res.data.data.tabs[0].tabImg == ""
            ) {
              this.authenStatusOne = false;
            } else if (
              res.data.data.tabs[0].tabName !== "" ||
              res.data.data.tabs[0].tabImg !== ""
            ) {
              this.ruleForm1.name1 = res.data.data.tabs[0].tabName;
              this.ruleForm1.image1 = res.data.data.tabs[0].tabImg;
              this.oneUrl = this.ruleForm1.image1;
              // 改：功能
              this.avatar1 = res.data.data.tabs[0].tabImg;
              this.authenStatusOne = true;
            }
          } else {
            this.avatar1 = "";
            // console.log(111);
            this.newavatar1 = "";
          }
          // 第二栏判断
          if (res.data.data.tabs[1] !== undefined) {
            if (
              res.data.data.tabs[1].tabName == "" &&
              res.data.data.tabs[1].tabImg == ""
            ) {
              this.authenStatusTwo = false;
            } else if (
              res.data.data.tabs[1].tabName !== "" ||
              res.data.data.tabs[1].tabImg !== ""
            ) {
              this.ruleForm2.name2 = res.data.data.tabs[1].tabName;
              this.ruleForm2.image2 = res.data.data.tabs[1].tabImg;
              this.twoUrl = res.data.data.tabs[1].tabImg;
              this.avatar2 = res.data.data.tabs[1].tabImg;
              this.authenStatusTwo = true;
            }
          } else {
            this.avatar2 = "";
            this.newavatar2 = "";
          }
          // 第三栏判断
          if (res.data.data.tabs[2] !== undefined) {
            if (
              res.data.data.tabs[2].tabName == "" &&
              res.data.data.tabs[2].tabImg == ""
            ) {
              this.authenStatusThree = false;
            } else if (
              res.data.data.tabs[2].tabName !== "" ||
              res.data.data.tabs[2].tabImg !== ""
            ) {
              this.ruleForm3.name3 = res.data.data.tabs[2].tabName;
              this.ruleForm3.image3 = res.data.data.tabs[2].tabImg;
              this.threeUrl = res.data.data.tabs[2].tabImg;
              this.avatar3 = res.data.data.tabs[2].tabImg;
              this.authenStatusThree = true;
            }
          } else {
            this.avatar3 = "";
            this.newavatar3 = "";
          }
          // 第四栏判断
          if (res.data.data.tabs[3] !== undefined) {
            if (
              res.data.data.tabs[3].tabName == "" &&
              res.data.data.tabs[3].tabImg == ""
            ) {
              this.authenStatusFour = false;
            } else if (
              res.data.data.tabs[3].tabName !== "" ||
              res.data.data.tabs[3].tabImg !== ""
            ) {
              this.ruleForm4.name4 = res.data.data.tabs[3].tabName;
              this.ruleForm4.image4 = res.data.data.tabs[3].tabImg;
              this.fourUrl = res.data.data.tabs[3].tabImg;
              this.avatar4 = res.data.data.tabs[3].tabImg;
              this.authenStatusFour = true;
            }
          } else {
            this.avatar4 = "";
            this.newavatar4 = "";
          }
          // 第五栏判断
          if (res.data.data.tabs[4] !== undefined) {
            if (
              res.data.data.tabs[4].tabName == "" &&
              res.data.data.tabs[4].tabImg == ""
            ) {
              this.authenStatusFive = false;
            } else if (
              res.data.data.tabs[4].tabName !== "" ||
              res.data.data.tabs[4].tabImg !== ""
            ) {
              this.ruleForm5.name5 = res.data.data.tabs[4].tabName;
              this.ruleForm5.image5 = res.data.data.tabs[4].tabImg;
              this.fiveUrl = res.data.data.tabs[4].tabImg;
              this.avatar5 = res.data.data.tabs[4].tabImg;
              this.authenStatusFive = true;
            }
          } else {
            this.avatar5 = "";
            this.newavatar5 = "";
          }
          // // 第六栏判断
          if (res.data.data.tabs[5] !== undefined) {
            if (
              res.data.data.tabs[5].tabName == "" &&
              res.data.data.tabs[5].tabImg == ""
            ) {
              this.authenStatusSix = false;
            } else if (
              res.data.data.tabs[5].tabName !== "" ||
              res.data.data.tabs[5].tabImg !== ""
            ) {
              this.ruleForm6.name6 = res.data.data.tabs[5].tabName;
              this.ruleForm6.image6 = res.data.data.tabs[5].tabImg;
              this.sixUrl = res.data.data.tabs[5].tabImg;
              this.avatar6 = res.data.data.tabs[5].tabImg;
              this.authenStatusSix = true;
            }
          } else {
            this.avatar6 = "";
            this.newavatar6 = "";
          }
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 树形图节点点击获取点击的id
    handleNodeClick(data) {
      // 清除表单验证提示
      this.$refs["ruleForm1"].resetFields();
      this.$refs["ruleForm2"].resetFields();
      this.$refs["ruleForm3"].resetFields();
      this.$refs["ruleForm4"].resetFields();
      this.$refs["ruleForm5"].resetFields();
      this.$refs["ruleForm6"].resetFields();
      this.title = data.name;
      // 第一栏清空 图片可上传
      this.ruleForm1 = {
        name1: "",
        image1: "",
      };
      this.oneUrl = "";
      this.authenStatusOne = false;
      // 第二栏清空 图片可上传
      this.ruleForm2 = {
        name2: "",
        image2: "",
      };
      this.twoUrl = "";
      this.authenStatusTwo = false;
      // 第三栏清空 图片可上传
      this.ruleForm3 = {
        name3: "",
        image3: "",
      };
      this.threeUrl = "";
      this.authenStatusThree = false;
      // 第四栏清空 图片可上传
      this.ruleForm4 = {
        name4: "",
        image4: "",
      };
      this.fourUrl = "";
      this.authenStatusFour = false;
      // 第五栏清空 图片可上传
      this.ruleForm5 = {
        name5: "",
        image5: "",
      };
      this.fiveUrl = "";
      this.authenStatusFive = false;
      // 第六栏清空 图片可上传
      this.ruleForm6 = {
        name6: "",
        image6: "",
      };
      this.sixUrl = "";
      this.authenStatusSix = false;
      // 获取当前id数据详情
      if (data.id === "6947dafe-0626-48d9-8776-572f022bfe84") {
        this.isInput = true;
        (this.authenStatusOne = true),
          (this.authenStatusTwo = true),
          (this.authenStatusThree = true),
          (this.authenStatusFour = true),
          (this.authenStatusFive = true),
          (this.authenStatusSix = true);
        this.$message({
          showClose: true,
          message: "当前ID禁止上传数据！",
          type: "warning",
        });
        return;
      } else {
        this.isInput = false;
        let Obj = {
          menuId: data.id,
        };
        this.get(Obj);
      }
    },
    // 点击取消按钮更改导航信息
    cancel() {
      // 获取当前id数据详情
      let obj = {
        menuId: this.tabId,
      };
      this.get(obj);
      this.$message({
        message: "取消成功",
        type: "success",
      });
    },

    // 点击保存按钮触发事件
    saveTable() {
      if (
        this.ruleForm1.name1 === "" &&
        this.ruleForm1.image1 === "" &&
        this.ruleForm2.name2 === "" &&
        this.ruleForm2.image2 === "" &&
        this.ruleForm3.name3 === "" &&
        this.ruleForm3.image3 === "" &&
        this.ruleForm4.name4 === "" &&
        this.ruleForm4.image4 === "" &&
        this.ruleForm5.name5 === "" &&
        this.ruleForm5.image5 === "" &&
        this.ruleForm6.name6 === "" &&
        this.ruleForm6.image6 === ""
      ) {
        this.$message.error("保存失败，该Tab页没有要保存的数据！");
      } else {
        let obj = {
          id: this.tabId,
          tabs: [
            {
              sort: 1,
              tabImg: this.ruleForm1.image1,
              tabName: this.ruleForm1.name1,
            },
            {
              sort: 2,
              tabImg: this.ruleForm2.image2,
              tabName: this.ruleForm2.name2,
            },
            {
              sort: 3,
              tabImg: this.ruleForm3.image3,
              tabName: this.ruleForm3.name3,
            },
            {
              sort: 4,
              tabImg: this.ruleForm4.image4,
              tabName: this.ruleForm4.name4,
            },
            {
              sort: 5,
              tabImg: this.ruleForm5.image5,
              tabName: this.ruleForm5.name5,
            },
            {
              sort: 6,
              tabImg: this.ruleForm6.image6,
              tabName: this.ruleForm6.name6,
            },
          ],
        };
        saveOrUpdate(obj).then((res) => {
          if (res.data.code === "10000") {
            this.$message({
              message: "保存成功",
              type: "success",
            });
          } else {
            this.$message.error("保存失败，请重试！");
          }
        });
      }
    },
    // 点击重置按钮触发事件
    deleteTab() {
      let obj = {
        ids: [this.tabId],
      };
      this.$confirm("此操作将清空该页所有数据, 是否继续?", "重置", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delUploads(obj).then((res) => {
            if (res.data.code === "10000") {
              // console.log(res);
              // 清除表单验证提示
              this.$refs["ruleForm1"].resetFields();
              this.$refs["ruleForm2"].resetFields();
              this.$refs["ruleForm3"].resetFields();
              this.$refs["ruleForm4"].resetFields();
              this.$refs["ruleForm5"].resetFields();
              this.$refs["ruleForm6"].resetFields();
              this.ruleForm1.name1 == "";
              this.ruleForm1.image1 == "";
              this.ruleForm2.name2 == "";
              this.ruleForm2.image2 == "";
              this.ruleForm3.name3 == "";
              this.ruleForm3.image3 == "";
              this.ruleForm4.name4 == "";
              this.ruleForm4.image4 == "";
              this.ruleForm5.name5 == "";
              this.ruleForm5.image5 == "";
              this.ruleForm6.name6 == "";
              this.ruleForm6.image6 == "";
              this.oneUrl = "";
              this.twoUrl = "";
              this.threeUrl = "";
              this.fourUrl = "";
              this.fiveUrl = "";
              this.sixUrl = "";
              this.authenStatusOne = false;
              this.authenStatusTwo = false;
              this.authenStatusThree = false;
              this.authenStatusFour = false;
              this.authenStatusFive = false;
              this.authenStatusSix = false;
              this.avatar1 = "";
              this.avatar2 = "";
              this.avatar3 = "";
              this.avatar4 = "";
              this.avatar5 = "";
              this.avatar6 = "";
              this.newavatar1 = "";
              this.newavatar2 = "";
              this.newavatar3 = "";
              this.newavatar4 = "";
              this.newavatar5 = "";
              this.newavatar6 = "";
              this.$message({
                type: "success",
                message: "删除Tab页成功!",
              });
            } else {
              this.$message.error("后台接口调用不成功！");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消重置",
          });
        });
    },
    //预览按钮触发事件
    previewbtn() {
      this.previewImg = true;
      this.clicktableimg = 0;
      let obj = {
        id: this.tabId,
        tabs: [
          {
            sort: 1,
            tabImg: this.ruleForm1.image1,
            tabName: this.ruleForm1.name1,
          },
          {
            sort: 2,
            tabImg: this.ruleForm2.image2,
            tabName: this.ruleForm2.name2,
          },
          {
            sort: 3,
            tabImg: this.ruleForm3.image3,
            tabName: this.ruleForm3.name3,
          },
          {
            sort: 4,
            tabImg: this.ruleForm4.image4,
            tabName: this.ruleForm4.name4,
          },
          {
            sort: 5,
            tabImg: this.ruleForm5.image5,
            tabName: this.ruleForm5.name5,
          },
          {
            sort: 6,
            tabImg: this.ruleForm6.image6,
            tabName: this.ruleForm6.name6,
          },
        ],
      };
      obj.tabs.map((item) => {
        if (item.tabName) {
          this.tablearr.push(item);
        }
      });
      // console.log(this.tablearr);
    },
    // 接收子组件传值
    // getMsgFormSon (data) {
    //   this.pass = data;
    // },
    // 关闭预览页面
    closePreview() {
      this.previewImg = false;
      this.tablearr = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.bigbox {
  overflow: auto;
}
// 搜索框的搜索图标
/deep/ .el-input__icon:after {
  margin-top: 6px;
}
// 树形导航的样式以及卡片里的内容
.el-tree {
  font-size: 14px;
  font-weight: 500;
  height: 670px;
  width: 278px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
/* 树形导航点击前面三角时的背景颜色 */
/deep/.el-tree-node:focus > .el-tree-node__content {
  background-color: rgba(0, 0, 0, 0);
}
/* 树形导航点击是的颜色和背景图 (点击其他地方仍保留选中状态) */
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #e7ebf0;
  color: #004fe0;
}
// 卡片的样式
.box-card {
  display: flex;
  position: relative;
  margin: 0 24px;
  margin-top: 80px;
  padding: 0 24px;
  padding-top: 18px;
  z-index: 11;
  /deep/.el-card__body {
    width: 100%;
    padding: 0px;
  }
  // 面包屑
  .el-breadcrumb {
    font-size: 20px;
    height: 29px;
    line-height: 29px;
  }
  // 按钮样式
  .but {
    position: absolute;
    right: 24px;
    height: 32px;
    margin: 0;
    top: 46px;
    /deep/ .el-button {
      margin-right: 16px;
      margin-left: 0;
      height: 32px;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 32px;
    }
  }
  // 卡片内容
  .card_content {
    margin-top: 48px;
    display: flex;
    // 卡片内容左面样式
    .card_left {
      position: relative;
      width: 278px;
      p {
        height: 24px;
        font-size: 20px;
        font-weight: 600;
        color: #000000;
        margin-bottom: 0;
      }
      /deep/ .el-input__inner {
        position: relative;
        margin-bottom: 24px;
        margin-top: 27px;
        margin-left: 2px;
        width: 276px;
        height: 32px;
      }
      /deep/ .el-input__inner:focus {
        border-color: #2672ed;
        box-shadow: 0 0 0 2px rgb(197, 208, 238);
      }
      .search {
        cursor: pointer;
        position: absolute;
        top: 55px;
        left: 255px;
        width: 15px;
        height: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    // 拉片内容中间样式
    .card_middle {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding-top: 51px;
      .demo-ruleForm {
        position: relative;
        // padding-bottom: 10px;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        .el-form-item {
          height: 40px;
          margin-bottom: 89px;
          margin-left: 70px;
        }
      }
      /deep/ .el-input__inner {
        width: 200px;
        height: 40px;
      }
    }
    // 卡片内容右面样式
    .card_right {
      width: 455px;
      height: 100%;
      padding-top: 51px;
      margin-right: 168px;
    }
  }
}
// 预览弹窗样式
.seeUp {
  text-align: left;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  .tables {
    position: relative;
    background-color: #fff;
    width: 1200px;
    border-radius: 10px;
    .close_img {
      width: 50px;
      height: 50px;
      position: absolute;
      top: -25px;
      right: -25px;
      z-index: 100;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      height: 66px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      text-align: center;
      line-height: 66px;
      font-size: 16px;
      border-bottom: 0.1px solid #e4e7ed;
      div {
        width: 100%;
      }
      div:hover {
        cursor: pointer;
        background-color: #f5f7fa;
        color: #4c9efd;
      }
      .border {
        border-bottom: 3px solid #4c9efd;
        margin-bottom: -1px;
        color: #4c9efd;
        background-color: #dfe1e5;
      }
    }
    .imgs {
      width: 100%;
      height: 420px;
      padding-top: 15px;
      div {
        height: 100%;
        img {
          width: 100%;
          height: 100%;
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
        }
      }
    }
  }
}
//上传图片样式
.avatar-uploader {
  position: relative;
  width: 300px;
  height: 101px;
  margin: 0;
  margin-left: 10px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  .avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .upImg {
    display: flex;
    position: absolute;
    top: 29px;
    left: 124px;
    div {
      width: 50px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    span {
      font-size: 14px;
      font-weight: 400;
      color: #45484d;
    }
  }
}
.content_one {
  position: relative;
}
// 上传图片后x号的位置和样式
.close_small {
  position: absolute;
  top: -20px;
  right: -12px;
  width: 24px;
  height: 24px;
  z-index: 11;
  img {
    width: 100%;
    height: 100%;
  }
}
// 迭代图片上传要求提示
.hint {
  user-select: none;
  position: absolute;
  color: #b7b7b7;
  font-size: 14px;
  height: 0;
  left: 10px;
  bottom: 6px;
}
// .stop {
// background-color: #fff;
// &:hover {
//   cursor: not-allowed;
// }
// }
</style>
<style lang="scss">
// 改变el-element底层样式
.el-message-box__btns > .el-button {
  height: 32px;
  padding: 0 20px;
  line-height: 32px;
  color: #004fe0;
  border: 1px solid #004fe0;
  margin-right: 6px;
}
.el-message-box__btns > .el-button--primary {
  color: #fff;
  background-color: #004fe0;
  margin-right: 0;
}
.but {
  .saveBtn {
    margin-right: 16px;
    margin-left: 0;
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 32px;
    color: #004fe0;
    border: 1px solid #004fe0;
  }
  .keep {
    height: 32px;
    color: #fff;
    margin-right: 16px;
    margin-left: 0;
    padding: 0 20px;
    background-color: #004fe0;
  }
  .el-button--danger {
    height: 32px;
    margin-left: 0;
    padding: 0 20px;
  }
}
</style>
